<template>
  <div>
    <button @click="qd">浪起来</button>
    <button @click="tz">暂停</button>
    <br />
    <h2>{{ age }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "我拿buff，谢谢~",
      intervalId: null,
    };
  },
  methods: {
    qd() {
      // console.log('qd')
      if (this.intervalId !== null) return;
      this.intervalId = setInterval(() => {
        const header = this.age.slice(0, 1);
        const body = this.age.slice(1);
        this.age = body + header;
      }, 500);
    },
    tz() {
      clearInterval(this.intervalId);
      // 每当清楚定时器之后,为了保证下次能够正常开启定时器,所以,需要把 intervalId 重置为null
      this.intervalId = null;
    },
  },
};
</script>

<style scoped></style>
